<template>
	<view class="shopping">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:right>
				<view class="right_slot">
					<image src="@/static/images/c1.png"></image>
					<input type="text" placeholder="搜索关键词">
					<view class="submit" @click="submit">搜索</view>
				</view>
			</template>
		</uv-navbar>
		<view class="content">
			<uv-swiper :list="rotation" keyName="img" radius="0" imgMode="scaleToFill" height="130"></uv-swiper>
			<view class="tabs">
				<view class="item" v-for="item in tabs" @click="router(`/pages/club/sell?id=${item.id}`)">
					<image :src="item.thumbnail"></image>
					<text>{{item.name}}</text>
				</view>
				<!-- <view class="item" @click="router('/pages/club/sell')">
					<image src="@/static/images/c9.png"></image>
					<text>甩卖专区</text>
				</view>
				<view class="item">
					<image src="@/static/images/c10.png"></image>
					<text>农谷农果专区</text>
				</view> -->
				<view class="item" @click="router('/pages/club/sell')">
					<image src="@/static/images/c11.png"></image>
					<text>直播专区</text>
				</view>
			</view>
			<view class="title">
				<view class="title_view">为您精选</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" @click="router(`/pages/club/goods_deta?id=${item.id}`)">
					<image :src="item.img" class="cover"></image>
					<view class="item_view">
						<view class="name">{{item.name}}</view>
						<view class="synopsis">{{item.synopsis}}</view>
						<view class="price">
							<view class="unit">￥</view>
							<view class="value">{{item.price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		product
	} from "@/request/api";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();

	import {
		ref
	} from "vue";
	const rotation = ref([]),
		tabs = ref([]),
		list = ref([]);
	const getList = async () => {
		let res = await product();
		rotation.value = res.rotation;
		tabs.value = res.class;
		list.value = res.product;
	};
	getList();
	
	const submit=()=>{
		
	};
</script>

<style scoped lang="scss">
	.shopping {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		background-color: #f5f5f5;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.right_slot {
			width: 586rpx;
			height: 68rpx;
			border-radius: 34rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			input {
				flex: 1;
				color: #999999;
				font-size: 26rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}

			.submit {
				color: #CA1C1D;
				font-size: 26rpx;
			}
		}

		.content {
			padding: 20rpx 30rpx 0;
			box-sizing: border-box;

			// .swiper {
			// 	image {
			// 		width: 100%;
			// 		height: 260rpx;
			// 	}
			// }

			.tabs {
				width: 100%;
				height: 185rpx;
				border-radius: 20rpx;
				margin-top: 25rpx;
				padding: 0 35rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
					}

					text {
						color: #333333;
						font-size: 24rpx;
						padding-top: 12rpx;
						box-sizing: border-box;
					}
				}
			}

			.title {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.title_view {
					width: 263rpx;
					color: #333333;
					font-size: 34rpx;
					font-weight: bold;

					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					&::after {
						content: "";
						width: 100%;
						height: 12rpx;
						background: url(@/static/images/c12.png) no-repeat;
						background-size: 100% 12rpx;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 330rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					box-shadow: 0rpx 0rpx 7rpx 0rpx #EEEEEE;
					background: #FFFFFF;

					.cover {
						width: 100%;
						height: 330rpx;
					}

					.item_view {
						height: 180rpx;
						padding: 24rpx 20rpx 30rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							color: #222222;
							font-size: 26rpx;
							font-weight: bold;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.synopsis {
							color: #999999;
							font-size: 24rpx;
						}

						.price {
							display: flex;
							align-items: flex-end;

							.unit {
								color: #CA1C1D;
								font-size: 26rpx;
								font-weight: bold;
							}

							.value {
								color: #CA1C1D;
								font-size: 30rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>